<template>
  <div class="industry-report">
    <div class="search-nav">
      <van-search
        v-model="searchValue"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      />

      <div class="filter-op">
        <van-button
          round
          icon="arrow-down"
          size="small"
          type="default"
          @click="showSign = true"
          >筛选</van-button
        >
      </div>

      <div class="add-btn" @click.stop="addIndustry">
        <div class="add-items" v-if="showAdd">
          <div class="pdf-btn" @click="addItem('N')">PDF上传</div>
          <div class="btn" @click="addItem('Y')">发表原创</div>
        </div>
      </div>
    </div>
    <!--    <div @click="showSign = true">筛选</div>-->
    <div class="industry-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="industry-item"
            v-for="(item, index) of industryData"
            :key="index"
            @click="toIndustry(item)"
          >
            <div class="item-info">
              <img :src="item.coverImage || DefaultBg" alt="" />
              <div class="info-name">{{ item.reportTitle }}</div>
              <div class="info-tags">
                <van-tag
                  round
                  type="primary"
                  v-for="(sItem, index) of getLabels(item.reportLabels)"
                  :key="index"
                  >{{ sItem }}</van-tag
                >
              </div>
              <div class="item-date">{{ item.reportDate }}</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <van-popup v-model:show="showSign" round position="bottom">
      <div class="filter-btn">
        <div class="clear-btn" @click="clearBtn">清空</div>
        <div class="title">筛选</div>
        <div class="confirm-btn" @click="confirmBtn">确认</div>
      </div>
      <div class="bq-box">
        <div class="bq-title">报告标签</div>
        <div
          v-for="(item, index) of reportLabelsData"
          :key="index"
          :name="item.id"
          @click="addLabel(item.id)"
          :class="['bq-item', { active: reportLabels.includes(item.id) }]"
        >
          {{ item.labels }}
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="IndustryRecord">
import { ref } from "vue";
import { listReport, reportLabelsListAll } from "./fetchData";
import DefaultBg from "./assets/default-bg.png";
import { useRouter } from "vue-router";

const router = useRouter();
const searchValue = ref("");
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const industryData = ref<Record<string, any>[]>([]);
const reportLabelsData = ref<{ id: string; labels: string }[]>([]);
const showAdd = ref(false);
const showSign = ref(false);
const reportLabels = ref<string[]>([]);

function onRefresh() {
  onSearch();
}

function onLoad() {
  onSearch();
}

function onSearch() {
  const query = {
    reportLabels: reportLabels.value.join(),
    reportTitle: searchValue.value
  };
  getData(query);
}

function clearBtn() {
  reportLabels.value = [];
  onSearch();
  showSign.value = false;
}

function confirmBtn() {
  onSearch();
  showSign.value = false;
}

function addLabel(id: string) {
  if (reportLabels.value.includes(id)) {
    reportLabels.value = reportLabels.value.filter(item => item !== id);
  } else {
    reportLabels.value.push(id);
  }
}

function toIndustry(item: any) {
  console.log(item);
  router.push({
    name: "IndustryReportDetail",
    query: { id: item.id, isOriginal: item.isOriginal }
  });
}

function addIndustry() {
  showAdd.value = !showAdd.value;
}

function addItem(isOriginal: string) {
  router.push({
    name: "IndustryReportDetail",
    query: { isOriginal }
  });
}

function getLabels(labels: string) {
  const arr = labels.split(",");
  const _labels: string[] = [];
  reportLabelsData.value.forEach(item => {
    if (arr.includes(item.id)) _labels.push(item.labels);
  });
  return _labels;
}

function getData(query?: Record<string, any>) {
  listReport(query)
    .then((res: any) => {
      industryData.value = res.rows || [];
    })
    .finally(() => {
      loading.value = false;
      finished.value = true;
      refreshing.value = false;
    });
}

function getLabelsAll() {
  reportLabelsListAll().then(res => {
    reportLabelsData.value = res.data || [];
  });
}

getData();
getLabelsAll();
</script>

<style scoped lang="less">
.industry-report {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #f3f4fa;

  .search-nav {
    :deep(.van-search) {
      border-radius: 0 0 1rem 1rem;
    }
  }

  .add-btn {
    position: absolute;
    right: 1rem;
    bottom: 5rem;
    width: 4.5rem;
    height: 4.5rem;
    background: url("./assets/add.png") no-repeat center;
    background-size: contain;
    z-index: 9;

    .add-items {
      position: absolute;
      top: -3rem;
      left: 0;
      transform: translateX(-100%);
      width: 9rem;
      padding: 1.2rem;
      border-radius: 0.5rem;
      background-color: #fff;
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);

      > div {
        position: relative;
        padding-left: 1.6rem;

        &:before {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          content: "";
          display: inline-block;
          width: 1.2rem;
          height: 1.2rem;
        }
      }

      .pdf-btn {
        margin-bottom: 1rem;

        &:before {
          background: url("./assets/pdf.png") no-repeat center;
          background-size: contain;
        }
      }

      .btn:before {
        background: url("./assets/fbyc.png") no-repeat center;
        background-size: contain;
      }
    }
  }

  .industry-list {
    flex: 1;
    height: 0;
    padding: 0 1rem;
    overflow: auto;

    .industry-item {
      width: 100%;
      margin-bottom: 1rem;
      padding: 1.2rem;
      background-color: #fff;
      border-radius: 0.5rem;

      img {
        width: 9.7rem;
        height: 5rem;
        margin-bottom: 0.6rem;
        object-fit: contain;
      }

      .info-name {
        font-size: 1.2rem;
        font-weight: 700;
      }

      .info-tags {
        .van-tag {
          margin-right: 0.5rem;
        }
      }

      .item-date {
        margin-top: 0.6rem;
        color: #999;
        font-size: 0.8rem;
      }
    }
  }

  .filter-op {
    display: flex;
    justify-content: flex-end;
    margin: 1rem 0;
    padding-right: 1rem;
  }

  .filter-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;

    .clear-btn {
      color: #969799;
    }

    .confirm-btn {
      color: #1989fa;
    }

    .title {
      font-weight: 700;
      font-size: 1.1rem;
    }
  }

  .bq-box {
    height: 86vh;
    padding: 1rem;
    overflow: auto;

    .bq-title {
      margin-bottom: 0.6rem;
      font-weight: 700;
      line-height: 2rem;
      color: #2e3244;
    }

    .bq-item {
      display: inline-block;
      margin-right: 1rem;
      margin-bottom: 1rem;
      padding: 0 1rem;
      line-height: 2rem;
      background-color: #f9f9f9;
      border-radius: 1rem;

      &.active {
        color: #ff4350;
        background: #ffeae8;
      }
    }
  }
}
</style>
